<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>NW Test</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="stylesheet" href="css/amazeui.min.css">
  <link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="am-cf admin-main">
  <!-- sidebar start -->
  <div class="admin-sidebar am-offcanvas" id="admin-offcanvas">
    <div class="am-offcanvas-bar admin-offcanvas-bar">
      <ul class="am-list admin-sidebar-list">
        <li><a href="index.html"><span class="am-icon-home"></span> 首页</a></li>
        <li class="admin-parent">
          <a class="am-cf" data-am-collapse="{target: '#collapse-nav'}"><span class="am-icon-sliders"></span> 功能 <span class="am-icon-angle-right am-fr am-margin-right"></span></a>
          <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav">
            <li><a href="editxml.html" class="am-cf"><span class="am-icon-edit"></span> 编辑XML<span class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span></a></li>
            <li><a href="admin-help.html"><span class="am-icon-puzzle-piece"></span> 功能2</a></li>
          </ul>
        </li>
        <li><a href="#"><span class="am-icon-sign-out"></span> 关于</a></li>
      </ul>

      <div class="am-panel am-panel-default admin-sidebar-panel">
        <div class="am-panel-bd">	
          <p><span class="am-icon-bookmark"></span> 使用提示</p>
          <p>xmlreader将xml转换为JSON对象</p>
        </div>
      </div>
    </div>
  </div>
  <!-- sidebar end -->

  <!-- content start -->
  <div class="admin-content">
    <div class="am-panel am-panel-default">
      <div class="am-panel-hd">
                    <div class="am-form-group am-form-file">
              <button type="button" class="am-btn am-btn-default am-btn-sm">
                <i class="am-icon-folder-open-o"></i> 打开XML文件</button>
                <input id="fileDialog" type="file" accept=".xml">
            </div>
      </div>
      <div class="am-panel-bd">
<!--         <xmp id="xmloutput" >
          
        </xmp> -->
        <form id="htmloutput" number="0"  class="am-form">
        	
        </form>
                <div class="am-progress">
                  <div class="am-progress-bar" style="width: 0%">0%</div>
                </div>
      </div>
      <div class="am-panel-footer">
        <div class="am-btn-toolbar ">
<!--           <div class="am-btn-group am-btn-group-lg">
            <button type="button" class="am-btn am-btn-primary" id="editBtn" data-am-loading="{loadingText: '编辑中...'}"><span class="am-icon-edit"></span> 开始编辑</button>
            <button type="button" class="am-btn am-btn-primary"><span class="am-icon-save"></span> 保存</button>
          </div>
          <div class="am-btn-group am-btn-group-lg " style="float: right;">
            <button type="button" class="am-btn am-btn-primary" id="prevBtn"><span class="am-icon-arrow-left"></span> 上一步</button>
            <button type="button" class="am-btn am-btn-primary" id="nextBtn"><span class="am-icon-arrow-right"></span> 下一步</button>
          </div> -->
          <div class="am-btn-group am-btn-group-lg" style="float: right;">
            <button type="button" class="am-btn am-btn-primary"><span class="am-icon-save"></span> 保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- content end -->

</div>

<a href="#" class="am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}">
  <span class="am-icon-btn am-icon-th-list"></span>
</a>
<footer>
  <hr>
  <p style="text-align: center;">© 2015 Sceletech, Inc. Using node.js <script>document.write(process.version)</script>.</p>
</footer>

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="js/amazeui.min.js"></script>
<script>
	// var path = require("path");
	// alert(path.dirname(process.execPath));

  var rf=require("fs");
  rf.readdir("input_form",function(err,files){
  	if(err){
  		alert(err);
  	}else{
  		// var $number=new Array(files.length);
  		// for(i=0;i<number.length;i++){
  		// 	$number[i]=parseInt(files[i]);
  		// }
  		// //返回最大值，其实可以直接返回$number.length,为以后不按顺序准备文件做准备
  		//$("#htmloutput").attr("max",Math.max.apply(null,$number));
  		$("#htmloutput").attr("max",files.length);
  	}
  });

  var chooser = document.querySelector('#fileDialog');
  chooser.addEventListener("change", function (evt) {
    apendText(this.value);
  }, false);

  function  recursionJSON(data,parent) {
            if(typeof(data) == "object") {
                $.each(data, function(i, n) {
                    if(typeof(n) == "object") {
                    	var li=$("<li></li>");
                    	$(li).append("<ul></ul>").appendTo(parent);
                        recursionJSON(n,$(li).children().eq(0));
                    }else {
                        //alert(i+": "+n)
                        
                        $("<li></li>").append('<div class="am-form-group"><label>'+i+'</label><input type="text" value="'+n+'"></div>').appendTo(parent);
                    }
                })
            }
   }

  function apendText(text) {
    var data=rf.readFileSync(text,"utf-8");
    var parseString=require('xml2js').parseString;
    parseString(data,function(err,result){
    	var showlist = $("<ul></ul>");
        recursionJSON(result,showlist);
        $("#htmloutput").append(showlist);
    	//$("#xmloutput").html(JSON.stringify(result));
    });
  }

  $('#prevBtn').click(function(){
  	alert($("#htmloutput").attr("max"));
  });
  $('#nextBtn').click(function () {
  	var $btn = $(this);
  	var $number=$("#htmloutput").attr("number");

  	$("#xmloutput").html("");


  	var data=rf.readFileSync("D:\\nw4xml\\input_form\\1.html","utf-8");
  	$("#htmloutput").html(data);
  	$("#htmloutput").attr("number",1);
  });

  $('#editBtn').click(function(){
  	var $btn = $(this);
  	$btn.button('loading');
  });

</script> 
</body>
</html>